<template>
    <div class="cl6">
        <div class="iHead1">隐患排查</div>
        <div class="main">
            <div class="m-t">
                <div class="m-t-i" style="width: 40px;">排名</div>
                <div class="m-t-i" style="width: 120px;">类型名称</div>
                <div class="m-t-i" style="width: 90px;">隐患上报总数</div>
            </div>
            <div class="m-m">
                <div class="m-t" v-for="(i, o) in mainData" :key="o">
                    <!-- <div class="m-t-i" v-if="o == 0" style="width: 40px;"><img src="@/assets/rank1.png" alt=""></div>
                    <div class="m-t-i" v-else-if="o == 1" style="width: 40px;"><img src="@/assets/rank2.png" alt="">
                    </div>
                    <div class="m-t-i" v-else-if="o == 2" style="width: 40px;"><img src="@/assets/rank3.png" alt="">
                    </div> -->
                    <div class="m-t-i" style="width: 40px;">{{ o + 1 }}</div>
                    <div class="m-t-i" style="width: 120px;">{{ i[0] }}</div>
                    <div class="m-t-i" style="width: 90px;">{{ i[1] }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: ['infoData', 'posItem', 'yearItem'],
    data() {
        return {
            mainData: []
        }
    },
    watch: {
        posItem: function (infoData) {
            this.getMainData();
        },
        yearItem: function (infoData) {
            this.getMainData();
        },
    },
    mounted() {
        this.getMainData();

    },
    methods: {
        getMainData() {
            this.mainData = [];
            this.infoData[13].map((i, o) => {
                if (i[0] == this.posItem) {
                    i[this.yearItem].split(',').map((n, m) => {
                        this.mainData.push(n.split(':'))
                    })
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.cl6 {
    width: 300px;
    height: 340px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 300px;
        height: 340px;
        z-index: 1;
        background-image: url('../../assets/denglukuang.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        opacity: .4;
    }

    .main {
        position: relative;
        z-index: 2;
        width: 90%;
        color: #fff;
        text-shadow: 0 0 8px #000;
        color: #fff;

        .m-m {
            max-height: 250px;
            overflow-y: auto;
        }

        .m-t {
            display: flex;
            border-bottom: 1px solid #eeeeee11;
            align-items: center;
            height: 40px;

            .m-t-i {
                font-size: 12px;
                text-align: center;

                img {
                    width: 20px;
                    height: auto;
                }
            }
        }


        .m-t:last-of-type {
            border-bottom: 0;
        }
    }
}
</style>